TicTacToe đơn giản trong JavaScript với mã nguồn
5.431 lượt xem;
1 var cells, emptyCells, moves, nextMove, avatar, gameOn, message, winSequence;
2 var cell0, cell1, cell2, cell3, cell4, cell5, cell6, cell7, cell8;
3
4 init();
5
6 function init() {
7 moves = 0;
8 gameOn = true;
9 winSequence = [];
10
11 cells = Array.from(document.getElementsByClassName('cell'));
12 cell0 = document.getElementById("C0");
13 cell1 = document.getElementById("C1");
14 cell2 = document.getElementById("C2");
15 cell3 = document.getElementById("C3");
16 cell4 = document.getElementById("C4");
17 cell5 = document.getElementById("C5");
18 cell6 = document.getElementById("C6");
19 cell7 = document.getElementById("C7");
20 cell8 = document.getElementById("C8");
21 document.getElementById("msg").textContent = "";
22 for (var i = 0; i < cells.length; i++) {
23 if (cells[i].hasChildNodes()){
24 cells[i].removeChild(cells[i].childNodes[0]);
25 }
26 cells[i].style.backgroundColor = "";
27 }
28 addListeners();
29 }
30
31 function addListeners() {
32 document.getElementById("btnReset").addEventListener("click", reset);
33 emptyCells = cells.filter(element => element.innerHTML === "");
34 for (var i = 0; i < emptyCells.length; i++) {
35 emptyCells[i].addEventListener('click', clickCells);
36 }
37 }
38 function removeListeners() {
39 for (var i = 0; i < cells.length; i++) {
40 cells[i].removeEventListener('click', clickCells);
41 }
42 }
43
44 function reset() {
45 // alert("in reset");
46 init();
47 }
48
49
50 function clickCells() {
51 takeTurn(this.id);
52 if (checkWinner()) {
53 var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
54 Promise.resolve(500).then(() => wait(500)).then(() => { nextPlayer(); });
55 }
56 else
57 displayWinner();
58 }
59
60 function takeTurn(id) {
61 if (moves <= 9) {
62 moves += 1;
63 var icon = "";
64 if (moves % 2 !== 0) {
65 icon = `<i class="fa fa-heart" style="font-size:50px;color:red"></i>`;
66 }
67 else {
68 icon = `<i class="fa fa-music" style="font-size:50px;color:goldenrod"></i>`;
69 }
70 document.getElementById(id).innerHTML = icon;
71 removeListeners();
72 }
73
74 }
75
76 function nextPlayer() {
77 emptyCells = cells.filter(element => element.innerHTML === "");
78 if (emptyCells.length > 0) {
79 var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
80 takeTurn(randomCell.id);
81 if (checkWinner())
82 addListeners();
83 else
84 displayWinner();
85 }
86
87 }
88
89 function checkWinner() {
90
91
92 if (cell0.hasChildNodes() && cell1.hasChildNodes() && cell2.hasChildNodes()) {
93 // console.log(cell0.childNodes[0].className);
94 if (cell0.childNodes[0].className === cell1.childNodes[0].className && cell0.childNodes[0].className === cell2.childNodes[0].className) {
95 message = cell0.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
96 winSequence = [cell0, cell1, cell2];
97 gameOn = false;
98 }
99 }
100 if (cell3.hasChildNodes() && cell4.hasChildNodes() && cell5.hasChildNodes()) {
101 // console.log(cell3.childNodes[0].className);
102 if (cell3.childNodes[0].className === cell4.childNodes[0].className && cell3.childNodes[0].className === cell5.childNodes[0].className) {
103 message = cell3.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
104 winSequence = [cell3, cell4, cell5];
105 gameOn = false;
106 }
107 }
108 if (cell6.hasChildNodes() && cell7.hasChildNodes() && cell8.hasChildNodes()) {
109 // console.log(cell6.childNodes[0].className);
110 if (cell6.childNodes[0].className === cell7.childNodes[0].className && cell6.childNodes[0].className === cell8.childNodes[0].className) {
111 message = cell6.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
112 winSequence = [cell6, cell7, cell8];
113 gameOn = false;
114 }
115 }
116 if (cell0.hasChildNodes() && cell3.hasChildNodes() && cell6.hasChildNodes()) {
117 //console.log(cell0.childNodes[0].className);
118 if (cell0.childNodes[0].className === cell3.childNodes[0].className && cell0.childNodes[0].className === cell6.childNodes[0].className) {
119 message = cell0.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
120 winSequence = [cell0, cell3, cell6];
121 gameOn = false;
122 }
123 }
124 if (cell1.hasChildNodes() && cell4.hasChildNodes() && cell7.hasChildNodes()) {
125 //console.log(cell1.childNodes[0].className);
126 if (cell1.childNodes[0].className === cell4.childNodes[0].className && cell1.childNodes[0].className === cell7.childNodes[0].className) {
127 message = cell1.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
128 winSequence = [cell1, cell4, cell7];
129 gameOn = false;
130 }
131 }
132 if (cell2.hasChildNodes() && cell5.hasChildNodes() && cell8.hasChildNodes()) {
133 // console.log(cell2.childNodes[0].className);
134 if (cell2.childNodes[0].className === cell5.childNodes[0].className && cell2.childNodes[0].className === cell8.childNodes[0].className) {
135 message = cell2.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
136 winSequence = [cell2, cell5, cell8];
137 gameOn = false;
138 }
139 }
140 if (cell0.hasChildNodes() && cell4.hasChildNodes() && cell8.hasChildNodes()) {
141 // console.log(cell0.childNodes[0].className);
142 if (cell0.childNodes[0].className === cell4.childNodes[0].className && cell0.childNodes[0].className === cell8.childNodes[0].className) {
143 message = cell0.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
144 winSequence = [cell0, cell4, cell8];
145 gameOn = false;
146 }
147 }
148 if (cell2.hasChildNodes() && cell4.hasChildNodes() && cell6.hasChildNodes()) {
149 // console.log(cell2.childNodes[0].className);
150 if (cell2.childNodes[0].className === cell4.childNodes[0].className && cell2.childNodes[0].className === cell6.childNodes[0].className) {
151 message = cell2.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
152 winSequence = [cell2, cell4, cell6];
153 gameOn = false;
154 }
155 }
156
157
158 return gameOn;
159
160 }
161
162 function displayWinner() {
163 document.getElementById("msg").textContent = message;
164 for (var i = 0; i < winSequence.length; i++) {
165 winSequence[i].style.backgroundColor = "cyan";
166 }
167 }
2 var cell0, cell1, cell2, cell3, cell4, cell5, cell6, cell7, cell8;
3
4 init();
5
6 function init() {
7 moves = 0;
8 gameOn = true;
9 winSequence = [];
10
11 cells = Array.from(document.getElementsByClassName('cell'));
12 cell0 = document.getElementById("C0");
13 cell1 = document.getElementById("C1");
14 cell2 = document.getElementById("C2");
15 cell3 = document.getElementById("C3");
16 cell4 = document.getElementById("C4");
17 cell5 = document.getElementById("C5");
18 cell6 = document.getElementById("C6");
19 cell7 = document.getElementById("C7");
20 cell8 = document.getElementById("C8");
21 document.getElementById("msg").textContent = "";
22 for (var i = 0; i < cells.length; i++) {
23 if (cells[i].hasChildNodes()){
24 cells[i].removeChild(cells[i].childNodes[0]);
25 }
26 cells[i].style.backgroundColor = "";
27 }
28 addListeners();
29 }
30
31 function addListeners() {
32 document.getElementById("btnReset").addEventListener("click", reset);
33 emptyCells = cells.filter(element => element.innerHTML === "");
34 for (var i = 0; i < emptyCells.length; i++) {
35 emptyCells[i].addEventListener('click', clickCells);
36 }
37 }
38 function removeListeners() {
39 for (var i = 0; i < cells.length; i++) {
40 cells[i].removeEventListener('click', clickCells);
41 }
42 }
43
44 function reset() {
45 // alert("in reset");
46 init();
47 }
48
49
50 function clickCells() {
51 takeTurn(this.id);
52 if (checkWinner()) {
53 var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
54 Promise.resolve(500).then(() => wait(500)).then(() => { nextPlayer(); });
55 }
56 else
57 displayWinner();
58 }
59
60 function takeTurn(id) {
61 if (moves <= 9) {
62 moves += 1;
63 var icon = "";
64 if (moves % 2 !== 0) {
65 icon = `<i class="fa fa-heart" style="font-size:50px;color:red"></i>`;
66 }
67 else {
68 icon = `<i class="fa fa-music" style="font-size:50px;color:goldenrod"></i>`;
69 }
70 document.getElementById(id).innerHTML = icon;
71 removeListeners();
72 }
73
74 }
75
76 function nextPlayer() {
77 emptyCells = cells.filter(element => element.innerHTML === "");
78 if (emptyCells.length > 0) {
79 var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
80 takeTurn(randomCell.id);
81 if (checkWinner())
82 addListeners();
83 else
84 displayWinner();
85 }
86
87 }
88
89 function checkWinner() {
90
91
92 if (cell0.hasChildNodes() && cell1.hasChildNodes() && cell2.hasChildNodes()) {
93 // console.log(cell0.childNodes[0].className);
94 if (cell0.childNodes[0].className === cell1.childNodes[0].className && cell0.childNodes[0].className === cell2.childNodes[0].className) {
95 message = cell0.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
96 winSequence = [cell0, cell1, cell2];
97 gameOn = false;
98 }
99 }
100 if (cell3.hasChildNodes() && cell4.hasChildNodes() && cell5.hasChildNodes()) {
101 // console.log(cell3.childNodes[0].className);
102 if (cell3.childNodes[0].className === cell4.childNodes[0].className && cell3.childNodes[0].className === cell5.childNodes[0].className) {
103 message = cell3.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
104 winSequence = [cell3, cell4, cell5];
105 gameOn = false;
106 }
107 }
108 if (cell6.hasChildNodes() && cell7.hasChildNodes() && cell8.hasChildNodes()) {
109 // console.log(cell6.childNodes[0].className);
110 if (cell6.childNodes[0].className === cell7.childNodes[0].className && cell6.childNodes[0].className === cell8.childNodes[0].className) {
111 message = cell6.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
112 winSequence = [cell6, cell7, cell8];
113 gameOn = false;
114 }
115 }
116 if (cell0.hasChildNodes() && cell3.hasChildNodes() && cell6.hasChildNodes()) {
117 //console.log(cell0.childNodes[0].className);
118 if (cell0.childNodes[0].className === cell3.childNodes[0].className && cell0.childNodes[0].className === cell6.childNodes[0].className) {
119 message = cell0.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
120 winSequence = [cell0, cell3, cell6];
121 gameOn = false;
122 }
123 }
124 if (cell1.hasChildNodes() && cell4.hasChildNodes() && cell7.hasChildNodes()) {
125 //console.log(cell1.childNodes[0].className);
126 if (cell1.childNodes[0].className === cell4.childNodes[0].className && cell1.childNodes[0].className === cell7.childNodes[0].className) {
127 message = cell1.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
128 winSequence = [cell1, cell4, cell7];
129 gameOn = false;
130 }
131 }
132 if (cell2.hasChildNodes() && cell5.hasChildNodes() && cell8.hasChildNodes()) {
133 // console.log(cell2.childNodes[0].className);
134 if (cell2.childNodes[0].className === cell5.childNodes[0].className && cell2.childNodes[0].className === cell8.childNodes[0].className) {
135 message = cell2.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
136 winSequence = [cell2, cell5, cell8];
137 gameOn = false;
138 }
139 }
140 if (cell0.hasChildNodes() && cell4.hasChildNodes() && cell8.hasChildNodes()) {
141 // console.log(cell0.childNodes[0].className);
142 if (cell0.childNodes[0].className === cell4.childNodes[0].className && cell0.childNodes[0].className === cell8.childNodes[0].className) {
143 message = cell0.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
144 winSequence = [cell0, cell4, cell8];
145 gameOn = false;
146 }
147 }
148 if (cell2.hasChildNodes() && cell4.hasChildNodes() && cell6.hasChildNodes()) {
149 // console.log(cell2.childNodes[0].className);
150 if (cell2.childNodes[0].className === cell4.childNodes[0].className && cell2.childNodes[0].className === cell6.childNodes[0].className) {
151 message = cell2.childNodes[0].className === "fa fa-heart" ? "You are the winner!" : "AI is the winner!";
152 winSequence = [cell2, cell4, cell6];
153 gameOn = false;
154 }
155 }
156
157
158 return gameOn;
159
160 }
161
162 function displayWinner() {
163 document.getElementById("msg").textContent = message;
164 for (var i = 0; i < winSequence.length; i++) {
165 winSequence[i].style.backgroundColor = "cyan";
166 }
167 }